<template>
	<div class="dashboard-container">
		<div class="container">
			<div class="tableBar" style="display: inline-block">
				<el-button type="primary" class="continue" @click="handleAdd(1)">+ 新增菜品分类</el-button>
				<el-button type="primary" @click="handleAdd(2)">+ 新增套餐分类</el-button>
			</div>
			<el-table :data="tableData" stripe class="tableBox">
				<el-table-column prop="name" label="分类名称"></el-table-column>
				<el-table-column prop="type" label="分类类型">
					<template #default="scope">
						<span>{{ scope.row.type == '1' ? '菜品分类': '套餐分类' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="updateTime" label="操作时间">
					<template #default="scope">
						{{scope.row.updateTime}}
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序"></el-table-column>
				<el-table-column label="操作" width="160" align="center">
					<template #default="scope">
						<el-button size="small" class="editBut" @click="handleEdit(scope.row)">修改</el-button>
						<el-button size="small" class="delBut" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination class="pageList" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" v-model:current-page.sync="page" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
		</div>
		<el-dialog :title="dialogTitle" v-model="open" width="30%">
			<el-form ref="formRef" :model="formData" :rules="formRules" class="demo-form-inline" label-width="100px">
				<el-form-item label="分类名称：" prop="name">
					<el-input v-model="formData.name" placeholder="请输入分类名称" maxlength="14" />
				</el-form-item>
				<el-form-item label="排序：" prop="sort">
					<el-input v-model.number="formData.sort" type="number" placeholder="请输入排序" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="open = false">取 消</el-button>
				<el-button type="primary" @click="submitForm()">确 定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessageBox, ElMessage } from 'element-plus';
import { getList, getCategoryById, deleteCategoryById, addCategory, editCategory } from '@/api/category/category'
import { resetForm } from '@/utils/tool';

const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const tableData = ref([]);

const dialogTitle = ref("");
const open = ref(false);
const formRef = ref();
const formData = ref({
    id: "",
	type: "",
    name: "",
    sort: 0,
});
const formRules = reactive({
	name: [{required: true, message: 'is not null', trigger: 'blur'}],
	sort: [{type: 'integer', message: 'is not integer', trigger: 'blur'}]
})

/* 查询分类列表 */
const getCategoryList = () => {
	const params = {
		page: page.value,
		pageSize: pageSize.value
	}
    getList(params).then((res) => {
		tableData.value = res.data.records;
		total.value = res.data.total;
	});
};
getCategoryList();

/* 添加按钮 */
const handleAdd = (type) => {
	resetForm(formRef.value);
    if (type == 1) {
        dialogTitle.value = "新增菜品分类";
    } else {
        dialogTitle.value = "新增套餐分类";
    }
    formData.value.type = type;
    open.value = true;
};

/* 修改按钮 */
const handleEdit = (row) => {
	resetForm(formRef.value)
    dialogTitle.value = "修改分类";
	getCategoryById({id: row.id}).then((res) => {
		formData.value = res.data
	})
	open.value = true;
};

/* 删除按钮 */
const handleDelete = (row) => {
    ElMessageBox.confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        deleteCategoryById({id: row.id}).then((res) => {
			if(res.code==1){
				ElMessage({type: 'success', message: res.data});
				getCategoryList();
			}else{
				ElMessage({type: 'error', message: res.msg});
			}
		})
    });
};

/* 提交表单 */
const submitForm = () => {
	formRef.value.validate((valid) => {
		if(valid){
			if(!formData.value.id){
				addCategory(formData.value).then((res) => {
					ElMessage({type: 'success', message: '分类添加成功！'});
					open.value = false;
					getCategoryList();
				})
			} else {
				addCategory(formData.value).then((res) => {
					ElMessage({type: 'success', message: '分类修改成功！'});
					open.value = false;
					getCategoryList();
				})
			}
		}
	})
};

/* 页码按钮 */
const handleSizeChange = (val) => {
    pageSize.value = val;
    getCategoryList();
};

/* 每页条目数按钮 */
const handleCurrentChange = (val) => {
    page.value = val;
    getCategoryList();
};
</script>

<style lang="scss" scoped>
</style>